<template>
  <el-main>
    <el-tabs
      tab-position="left"
      v-model="activeTab"
    >
      <el-tab-pane
        label="歌单"
        name="song"
      >
        <el-card
          class="song"
          :body-style="{ padding: '0px' }"
          v-for="song in songs"
          :key="song.id"
        >
          <router-link :to="`/song/${song.id}`">
            <img src="../../assets/song.jpeg" />
          </router-link>
          <div class="info">
            <div>{{song.name}} - {{song.creator}}</div>
            <!-- <div class="price">10{{song}} 欢乐值</div> -->
            <!-- <div class="playnum">1024</div> -->
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane
        label="歌手"
        name="singer"
      >
        <el-card
          class="singer"
          :body-style="{ padding: '0px' }"
          v-for="singer in singers"
          :key="singer.id"
        >
          <router-link :to="`/singer/${singer.id}`">
            <img src="http://p2.qhimgs4.com/t01884ea128faf3bec0.jpg" />
          </router-link>
          <div class="info align-center">
            <div>{{ singer.username }}</div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane
        label="明星后援会"
        name="ssas"
      >
        <el-table
          :data="ssas"
          border
        >
          <el-table-column
            label="编号"
            prop="id"
            width="60"
          ></el-table-column>
          <el-table-column
            label="名称"
            prop="title"
          >
            <template slot-scope="scope">
              <router-link :to="`/ssa/${scope.row.id}`">{{scope.row.title}}</router-link>
            </template>
          </el-table-column>
          <el-table-column
            label="描述"
            prop="desc"
          ></el-table-column>
          <el-table-column
            label="总人数"
            prop="totalFans"
          ></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-main>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'Home',
  mounted() {
    this.getAllSongs();
    this.getAllSingers();
  },
  data() {
    return {
      activeTab: 'song',
      // songs: new Array(8).fill(1).map((it, index) => index),
      // singers: new Array(8).fill(1).map((it, index) => index),
      ssas: new Array(8).fill(1).map((it, index) => ({
        id: index,
        title: `后援会${index}`,
        desc: `描述${index}`,
        totalFans: Math.floor(Math.random() * 100),
      })),
    };
  },
  computed: {
    ...mapGetters([
      'songs',
      'singers',
    ]),
  },
  methods: {
    ...mapActions([
      'getAllSongs',
      'getAllSingers',
    ]),
  },
};
</script>

<style scoped>
.el-card {
  float: left;
  width: 320px;
  margin: 10px;
}

/* 卡片图 */
img {
  width: 100%;
}

/* 卡片信息 */
.info {
  padding: 5px 10px;
  position: relative;
  color: #666;
}

/* 价格 */
.info .price {
  font-size: 1.4em;
  font-weight: bolder;
  color: #f16c6c;
  text-align: center;
}

/* 播放量 */
.info .playnum {
  position: absolute;
  right: 10px;
  top: 5px;
  color: #888;
}
</style>
